<template>
  <el-drawer
    custom-class="mc-drawer"
    direction="rtl"
    :size="realWidth + 'px'"
    :append-to-body="appendToBody"
    v-model="drawerShow"
    :destroy-on-close="destroyOnClose"
    :close-on-click-modal="wrapperClosable"
    :before-close="closeDraw"
  >
    <template #header>
      <span>{{ title }}</span>
    </template>
    <div class="drawer-contain" :style="{ 'padding-bottom': isShowMoreBtn ? '50px' : 0 }">
      <slot name="column"></slot>
    </div>
    <div class="drawer-move" @mousedown="addResizeEvent" v-if="canResize"></div>
    <div class="more-btn" v-if="isShowMoreBtn">
      <el-button @click="cancelFun" link>取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-drawer>
</template>
<script lang="ts">
/**
 * 可改变宽度的drawer
 * 使用参数参考element-plus el-drawer
 */
import { defineComponent, onMounted, onDeactivated, reactive, toRefs, computed, watch } from 'vue'
export default defineComponent({
  name: 'ResizeDrawer',
  props: {
    size: {
      // 抽屉的宽度，默认400
      type: Number,
      default: 400
    },
    drawer: {
      // 是否显示抽屉的标识，默认关闭
      type: Boolean,
      default: false
    },
    title: {
      // 标题
      type: String,
      default: ''
    },
    destroyOnClose: {
      // 是否在关闭的时候销毁组件，默认销毁
      type: Boolean,
      default: true
    },
    wrapperClosable: {
      // 点遮罩是否关闭抽屉，默认不能关闭
      type: Boolean,
      default: false
    },
    appendToBody: {
      // 是否插入body
      type: Boolean,
      default: false
    },
    canResize: {
      // 是否可以调整抽屉宽度
      type: Boolean,
      default: true
    },
    isShowMoreBtn: {
      // 是否显示更多的操作按钮
      type: Boolean,
      default: false
    }
  },
  emits: ['onCloseDraw', 'onSave', 'onCancelFun', 'update:drawer'],
  setup(props, { emit }) {
    const { size } = toRefs(props)
    const state = reactive({
      realWidth: 400 // 抽屉的真实宽度
    })

    const drawerShow = computed({
      get: () => props.drawer,
      set: (val) => emit('update:drawer', val)
    })

    const closeDraw = () => {
      // 抽屉关闭时的回调
      emit('onCloseDraw')
    }

    const addResizeEvent = (e: any) => {
      // 抽屉宽度可调整
      const domWidth = document.documentElement.clientWidth
      e.stopPropagation()
      document.onmousemove = (ev) => {
        ev.preventDefault()
        state.realWidth = domWidth - ev.pageX
        if (state.realWidth < size.value) {
          state.realWidth = size.value
        }
        if (state.realWidth > domWidth) {
          state.realWidth = domWidth
        }
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
      }
    }

    const save = () => {
      // 保存事件
      emit('onSave')
    }

    const cancelFun = () => {
      // 取消事件
      emit('onCancelFun')
    }

    onDeactivated(() => {
      // 组件退出弹层关闭
      emit('onCancelFun')
    })

    watch(
      // 抽屉宽度动态变化
      () => size.value,
      () => {
        state.realWidth = size.value
      }
    )

    onMounted(() => {
      state.realWidth = size.value
    })

    return {
      closeDraw,
      addResizeEvent,
      save,
      cancelFun,
      drawerShow,
      ...toRefs(state)
    }
  }
})
</script>
<style scoped lang="stylus">
.mc-drawer
  position relative
  .drawer-contain
    overflow auto
  .drawer-move
    position absolute
    left 0px
    width 5px
    top 0px
    height 100%
    cursor col-resize
    transition 0.3s ease
    z-index 21
    &:hover
      background #008cee
  .more-btn
    width 100%
    position absolute
    background #fff
    bottom 0px
    right 0px
    height 60px
    padding 12px 24px 12px 24px
    z-index 20
    text-align right
    box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.05)
</style>
